<template>
  <div>
    <h2>Home组件</h2>
    <!-- 声明式路由导航-使用router-link组件,支持用户在具有路由功能的应用中(点击)导航 -->
  <!-- <router-link to="/Home/News" tag="button">新闻</router-link>
  <router-link to="/Home/Music" tag="button">音乐</router-link>
  <router-link to="/Home/Game" tag="button">游戏</router-link> -->

  <!-- replace属性让路由跳转的过程中替换之前的历史记录 -->
  <!-- active-class:设置链接激活时使用的css类名 -->

  <!-- <router-link :to="{path:'/Home/News',}" tag="button" replace active-class="active">新闻</router-link>
  <router-link :to="{ path:'/Home/Music',}" tag="button" replace active-class="active">音乐</router-link>
  <router-link :to="{path:'/Home/Game',}" tag="button" replace active-class="active">游戏</router-link> -->
  
  <!-- 编程式路由导航 -->
  <button @click="toNews">新闻</button>
  <button @click="toMusic">音乐</button>
  <button @click="toGame">游戏</button>
  <!-- home中的二级路由出口 -->
  <router-view></router-view>
  </div>
</template>

<script>
export default {
name:"Home",
methods:{
    // 编程式路由导航,我们使用我们给每一个组件实例注入的$router上的方法(在VueRouter.prototype上)
    //    this.$router.push():push参数有两种:string和location对象
    //    this.$router.replace()
    //    this.$router.go()

    // push重复导航会报出promise的错:
    //   push在导航时,如果发现已经是当前路径,则会抛出promise异常
    //   push如果书写第二个和第三个参数,代表成功和失败的回调函数就可以了
    //   push如果不书写回调函数,则默认返回promise实例,我们需要使用catch来接受异常也可以解决
  toNews(){
    const re=this.$router.push(
      "/Home/News",
      ()=>{},
      ()=>{}
    )
    console.log("re",re);
  },
   toMusic(){
    this.$router.push({
      name:"Music",
    })
    .catch(()=>{})
  },
   toGame(){
      this.$router.push({
      name:"Game",
    })
    .catch(()=>{})
  }
}
}
</script>

<style scoped>
.active{
  background: yellow;
}
</style>